<template>
  <div class="optionPopup">
    <van-popup v-model="showPopup" round position="bottom" :style="{ height: '40%' }" :close-on-click-overlay="false">
      <div class="optionPopupBox">
        <div class="close">
          <div class="close_b" @click="closeBtn"><van-icon name="cross" color="#6E6E79" /></div>
        </div>
        <div class="goodsOption">
          <div class="goodsOption_l">
            <img :src="item.has_one_goods.thumb" alt="" v-if="item.has_one_goods" />
          </div>
          <div class="goodsOption_r">
            <div class="title van-ellipsis" v-if="item.has_one_goods">{{ item.has_one_goods.title }}</div>
            <div class="stock" v-if="isPick"><span class="txt">可提货数量：</span>{{ item.usable_count }}</div>
            <div class="stock" v-else-if="isJoin">
              <span class="txt">可参拍数量：</span>{{ item.show_stock }}
              <span style="margin-left: 0.63rem;">
                <span class="txt">起拍量:</span>
                {{ item.min_count }}</span
              >
            </div>
            <div class="stock" v-else-if="!isJoin"><span class="txt">可委拍数量：</span>{{ item.usable_auction_goods_count }}</div>
            <div class="selectBox">
              <span class="txt">数量：</span>
              <van-stepper v-model="value" :max="item.usable_count" integer v-if="isPick" />
              <van-stepper v-model="value" :min="item.min_count" :max="item.show_stock" integer v-else-if="isJoin" />
              <van-stepper v-model="value" min="0" :max="item.usable_auction_goods_count" integer v-else />
              <span class="all" @click="allTap">全部</span>
            </div>
          </div>
        </div>
        <div class="bottomBox">
          <div class="bottomBox_l">{{ $i18n.t("money") }}{{ totalPrice }}</div>
          <template v-if="$route.name == 'new_auction_detail'">
            <div class="buttonBox">
              <div class="bottomBox_r leftL" @click="closeBtn">取消</div>
              <div class="bottomBox_r leftB" v-if="isJoin" @click="joinTap">参拍</div>
              <div class="bottomBox_r leftw" v-else @click="entrust">委拍</div>
            </div>
          </template>
          <div v-else class="bottomBox_r" @click="pickUp">提货</div>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
export default {
  model: {
    prop: "showPopup",
    event: "onEmit"
  },
  props: {
    showPopup: {
      type: Boolean,
      default: false
    },
    isJoin: {
      type: Boolean,
      default: false
    },
    isPick: {
      type: Boolean,
      default: false
    },
    item: {
      type: null
    }
  },
  data() {
    return {
      value: 0
    };
  },
  computed: {
    totalPrice() {
      if (this.isPick) {
        return (this.value * this.item.has_one_activity.max_amount).toFixed(2);
      } else {
        return (this.value * this.item.now_amount).toFixed(2);
      }
    },
    selectNum() {
      if (this.value < this.item.min_count) {
        this.value = this.item.min_count;
      }
      return this.value;
    }
  },
  methods: {
    async pickUp() {
      this.$emit("pickUp", { id: this.item.id, value: this.value });
    },
    closeBtn() {
      this.$emit("closePopup");
    },
    allTap() {
      if (this.isPick) {
        this.value = this.item.usable_count;
      } else if (this.isJoin) {
        this.value = this.item.show_stock;
      } else {
        this.value = this.item.usable_auction_goods_count;
      }
    },
    async joinTap() {
      if (!this.value) return this.$toast("参拍数量不能为空");
      let json = {
        id: this.$route.params.id,
        num: this.value
      };
      let { data, msg, result } = await $http.post("plugin.new-auction.frontend.auction.auction", json, ".");
      if (result) {
        this.$toast(msg);
        this.closeBtn();
        this.$emit("onUpdate");
      } else {
        this.$toast(msg);
      }
    },
    async entrust() {
      // if (!this.value) return this.$toast("委拍数量不能为空");
      this.$dialog.confirm({ message: `是否确认委拍${this.item.has_one_goods.title}${this.value}个`, showCancelButton: false }).then(async () => {
        let json = {
          activity_id: this.$route.params.id,
          num: this.value
        };
        let { data, msg, result } = await $http.post("plugin.new-auction.frontend.entrust.entrust", json, ".");
        if (result) {
          this.$toast(msg);
          this.closeBtn();
          this.$emit("onUpdate");
        } else {
          this.$toast(msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.optionPopupBox {
  padding: 1.25rem 0.75rem 0 0.75rem;
  box-sizing: border-box;
  height: 100%;
  position: relative;
  .bottomBox {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3.75rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.75rem 0 0.97rem;
    border-top: 0.03rem solid #f0f0f1;
    .bottomBox_l {
      flex: 1;
      font-weight: 500;
      font-size: 1.25rem;
      color: #f15353;
      text-align: left;
    }
    .bottomBox_r {
      flex-shrink: 0;
      width: 7.5rem;
      height: 2.5rem;
      background: #f15353;
      border-radius: 1.28rem;
      text-align: center;
      line-height: 2.5rem;
      font-weight: 500;
      font-size: 0.94rem;
      color: #ffffff;
    }
  }
  .goodsOption {
    display: flex;
    .goodsOption_r {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      text-align: left;
      flex: 1;
      .selectBox {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .txt {
          font-size: 0.81rem;
          color: #6e6e79;
        }
        .all {
          font-size: 0.88rem;
          color: #f15353;
          margin-right: 2rem;
        }
      }
      .title {
        font-weight: 500;
        font-size: 0.88rem;
      }
      .stock {
        .txt {
          color: #6e6e79;
          font-size: 0.81rem;
        }
      }
    }
    .goodsOption_l {
      flex-shrink: 0;
      width: 5.38rem;
      height: 5.38rem;
      background: #d6d6dc;
      border-radius: 0.63rem;
      margin-right: 0.53rem;
      img {
        width: 5.38rem;
        border-radius: 0.63rem;
        height: 5.38rem;
      }
    }
  }
  .close {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 0.94rem;
    .close_b {
      width: 1.5rem;
      height: 1.5rem;
      background: #f0f0f1;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
.buttonBox {
  display: flex;
  .bottomBox_r {
    width: 5.63rem;
    height: 2.5rem;
    border-radius: 1.28rem;
    text-align: center;
    line-height: 2.5rem;
    font-weight: 500;
    font-size: 0.94rem;
  }
  .leftL {
    border: 0.03rem solid #f15353 !important;
    background: #ffffff !important;
    color: #f15353 !important;
    margin-right: 0.81rem;
    width: 5.63rem !important;
  }
  .leftB {
    background: #f15353 !important;
    color: #ffffff !important;
    width: 5.63rem !important;
  }
  .leftw {
    background: #ffa229 !important;
    color: #ffffff !important;
    width: 5.63rem !important;
  }
}
</style>
